<template>
  <div>
    <checked-title title="近一周案件数" :width="420"></checked-title>
    <div id="jinyizhouanjian" ref="echarts" style="height:240px"></div>
  </div>
</template>

<script>
import { YingPanShiDian } from '@/api'
export default {
  data() {
    return {}
  },
  methods: {
    //获取接口
    getList(){
      YingPanShiDian.getNearlyWeekOrder().then(res=>{
        this.initechart(res.data)
      })
    },
    desHander() {
      let myChart = echarts.init(this.$refs.echarts)
      myChart.dispose()
    },
    initechart(data) {
      //数据处理
      let xAios = []
      let date = []
      let yAxis = []
      data.forEach(item=>{
        date.push(item.date)
        yAxis.push(item.count)
      })
      xAios = date.map(ite=>{
        let as = ite.split('-')
        return as[1] + '.' + as[2]
      })

      let echartjyzaj = null

      echartjyzaj =         echarts.init(document.getElementById('jinyizhouanjian'))
      var option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(31, 73, 135, 0.5)', //设置背景图片 rgba格式
          borderWidth: '0', //边框宽度设置1
          textStyle: {
            color: '#fff', //设置文字颜色
          },
          axisPointer: {
            type: 'line', //line,shadow
            lineStyle: {
              type: 'solid', //打开就是实线类型
              color: 'rgba(13, 151, 235, 0.7)',
            },
          },
          // formatter: (params) => {
          //   let str = ` ${params[0].name} <br/> 数值:${params[0].data}${
          //     this.active == 'n00001' ? 'dB' : 'μg/m³'
          //   }`

          //   return str
          // },
        },
        grid: {
          top: '10%',
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xAios,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            rotate: 50,
            interval: 0,
            textStyle: {
              color: '#9ED5FF',
              fontSize: 12,
            },
          },
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(13, 151, 235, 0.1)',
              type: 'dashed',
            },
          },
        },
        series: [
          {
            data: yAxis,
            type: 'bar',
            barMaxWidth: 15,
            barGap: '10%',
            itemStyle: {
              normal: {
                color:  function(params) {
                  // 定义换色数组
                  let colorList = [
                    ['#29E2F1', '#FFFFFF'],
                  ]
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#29E2F1'
                    },
                    {
                      offset: 1,
                      color: '#FFFFFF'
                    }
                  ])
                  
                },
                label: {
                  show: false,
                },
                barBorderRadius: [30, 30, 0, 0], //圆角大小
              },
            },
          },
        ],
      }
      echartjyzaj.setOption(option,true)
    },
  },
  mounted() {
    this.getList()
  },
  beforeDestroy() {
    this.desHander()
  },
}
</script>
<style lang="less" scoped></style>
